<!--
 * @Author: Dorange.Wang
 * @Date: 2021-04-07 16:19:40
 * @LastEditors: your name
 * @LastEditTime: 2021-04-12 15:30:13
 * @Description: file content
-->
<template>
  <el-dialog
    :visible="showVisible"
    center
    :show-close="false"
    width="750px"
  >
    <div class="b g3 f16 tl" slot="title">
      <div class="ks-row-between pl15 pr15">
        <span>{{ modalTitle }}</span>
        <span
          class="el-icon-close g9 f26 poi"
          @click="handleModalCancel"
        ></span>
      </div>
    </div>
    <el-form
      ref="form"
      class="pl30 pr30"
      :model="formData"
      label-width="120px"
    >
      <el-form-item
        v-if="modalType === 1"
        label="分类名称"
        prop="ruleName"
        :rules="[
          {
            required: true,
            message: '分类名称不能为空',
            trigger: 'change'
          }
        ]"
      >
        <el-input v-model="formData.ruleName" :maxlength="64" show-word-limit></el-input>
      </el-form-item>
      <template v-if="modalType === 2">
        <el-form-item
          v-if="modalType !== 1"
          label="规则类型"
          prop="ruleType"
          :rules="[
            {
              required: modalType !== 1,
              message: '请选择规则类型',
              trigger: 'change'
            }
          ]"
        >
          <el-radio-group v-model="formData.ruleType" :disabled="!!formData.id">
            <el-radio label="STATIC">静态规则</el-radio>
            <el-radio label="DYNAMIC">动态规则</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="规则名称"
          prop="ruleName"
          :rules="[
            {
              required: true,
              message: '规则名称不能为空',
              trigger: 'change'
            }
          ]"
        >
          <el-input
            v-model="formData.ruleName"
            placeholder="请输入规则名称"
            :maxlength="64"
            show-word-limit>
          </el-input>
        </el-form-item>
        <el-form-item
          v-if="modalType !== 1"
          label="规则编码"
          prop="ruleCode"
          :rules="[
            {
              required: modalType !== 1,
              message: '规则编码不能为空',
              trigger: 'change'
            }
          ]"
        >
          <el-input
            v-model.trim="formData.ruleCode"
            placeholder="请输入规则编码"
            :disabled="!!formData.id"
            :maxlength="64"
            show-word-limit>
          </el-input>
        </el-form-item>
        <!--todo-->
        <el-form-item prop="autoReset" label="是否自动重置">
          <el-switch v-model="formData.autoReset"></el-switch>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input
            type="textarea"
            v-model="formData.description"
            :maxlength="255"
            show-word-limit>
          </el-input>
        </el-form-item>

      </template>
      <template v-if="modalType === 3">
        <el-form-item
          label="实例名称"
          prop="ruleName"
          :rules="[
            {
              required: true,
              message: '实例名称不能为空',
              trigger: 'change'
            }
          ]"
        >
          <el-input
            v-model="formData.ruleName"
            placeholder="请输入实例名称"
            :maxlength="64"
            show-word-limit>
          </el-input>
        </el-form-item>
        <el-form-item
          v-if="modalType !== 1"
          label="实例编码"
          prop="ruleCode"
          :rules="[
            {
              required: true,
              message: '实例编码不能为空',
              trigger: 'change'
            }
          ]"
        >
          <el-input
            v-model.trim="formData.ruleCode"
            :disabled="!!formData.id"
            placeholder="请输入实例编码"
            :maxlength="64"
            show-word-limit>
          </el-input>
        </el-form-item>

      </template>

    </el-form>
    <div slot="footer" class="tr">
      <el-button @click="handleModalCancel">取 消</el-button>
      <el-button :loading="loading" type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { postTechserialnum,putTechserialnum } from '@/apis/paas/TechSerialNumController.js'
export default {
  data () {
    return {
      modalType: 1, // 类型:1分类 2规则 3实例 也是树节点的level字段
      showVisible: false,
      isModalEdit: false,
      loading: false,
      formData: {}
    }
  },

  computed: {
    isNew () {
      return !this.formData.id
    },
    modalTitle() {
      const { modalType } = this
      if (this.isModalEdit) {
        if (modalType === 1) {
          return '编辑分类'
        } if (modalType === 2) {
          return '编辑规则'
        }
        return '编辑实例'
      }
      if (modalType === 1) {
        return '新建分类'
      } if (modalType === 2) {
        return '新建规则'
      }
      return '新建实例'
    }
  },

  methods: {
    addForm (record = {}) {
      this.showVisible = true
      this.formData = { ...record }
      this.formData.level = this.modalType
      this.formData.parentId = this.parentId
      if (this.formData.level === 2) {
        this.$set(this.formData, 'autoReset', true)
      }
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
    },

    editForm (record) {
      this.formData = { ...record }
      this.formData.level = this.modalType
      this.showVisible = true
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
    },

    async submit() {
      try {
        await this.$refs.form.validate()
        const { id, parentId, level, ruleName, ruleCode, ruleType, autoReset } = this.formData

        let params = {}
        let request = null
        if (this.isModalEdit) {
          params = { id, level, ruleName, ruleCode, ruleType, autoReset }
          request = putTechserialnum
        } else {
          params = { parentId, level, ruleName, ruleCode, ruleType, autoReset }
          request = postTechserialnum
        }
        for (const key in params) {
          params[key] = typeof params[key] === 'string' ? params[key].trim() : params[key]

          if (params[key] === null) {
            delete params[key]
          }
        }
        this.loading = true
        request(params).then(res => {
          this.loading = false
          this.handleModalCancel()
          this.$emit('ok')
        }).finally(() => {
          this.loading = false
        })
      } catch (error) {
        console.log(error)
      }
    },

    handleModalCancel() {
      this.modalType = 1
      this.isModalEdit = false
      this.showVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
